到目前為止，預計要做的頁面大致都完成了，接著我想加入更多可以互動的元素，和優化使用者體驗。
那有哪些效果是可以增加的？這裡我想到了許多網站或是App都有的設計，深色模式。
首先想想要怎麼寫能達到效果，基本上原理是點擊按鈕>改變style，而要改變可以直接在行內增加，或是修改CSS檔，又或者直接給元素加上新的class。
但是前兩種方式在後續的修改上會比較不方便，所以我選擇加上一個新的class。

先加入作為按鈕的元素和之後要新增的class

<input type="checkbox" id="click-mode" />

<div class="header">
  <label for="click-mode" class="mode"></label>
</div>

.dark{
  /* 這裡放深色模式需要的樣式 */
}

前面引入過jQuery了，接下來直接用就好，要綁定事件需要指定元素$(" 指定的元素 ")，指定事件，這裡用on(' 事件 ')來觸發。

<script>
  $("#click-mode").on('click', function() {
    $("body").toggleClass("dark");
  });
</script>

上面可以看到當按鈕點擊後，觸發了toggleClass()方法，它的作用在於切換class的存在與否。
如果單純使用addClass()方法，想讓網頁在深色和亮色模式間切換，就需要多加上，當切換回亮色模式就刪除dark class這一行程式。
所以當需要在兩個模式間切換時，用toggleClass()方法可以讓程式更加簡潔。

參考資料/延伸閱讀

1. powerkaifu.github.io